<template>
    <div>
        <div class="search">
            <van-row class="text-row">
                <van-col span="4" class="icofont">
                    <img src="../../assets/img/location.png" class='img'>
                </van-col>
                <van-col span="15" class="input">
                    <input type="text" placeholder="请输入你想要搜索的英雄" v-model="name">
                </van-col>
                <van-col span="5" class="btn">
                    <van-button type="primary" class="button" @click=" push" >搜索</van-button>
                </van-col>
            </van-row>
        </div>
        <Swiper></Swiper>
        <Detail />
        <!-- auto轮播图 -->
    </div>
</template>

<script setup>

import { ref }  from 'vue'
import { useRouter } from 'vue-router';
import Swiper from '@/components/page/Swiper.vue'
import emitter from '@/utils/emitter';
import Detail from '@/components/page/Detail.vue'
import { useCounterStore } from '@/stores/counter.js'
const store=useCounterStore()   //store 是一个仓库
const use=useRouter()





let name=ref("")
function push(){

       



     if(name.value){
         store.ChangeName(name.value)
      emitter.emit('receive', name.value)
        use.push('/Name')
     }
}

</script>

<style lang="css" scoped>
*{
       box-sizing: border-box;
}
.text-row{
       text-align: center;
}
.search{
         height: 2.2rem;
         background-color: brown;
         line-height: 2.2rem;
}
.icofont{
        
         display: flex;
         align-items: center;
         padding-left: 0.5rem;
}
.img{
       
       width: 1.2rem;
       height: 1.2rem;
}
.input{
        width: 100%;
        height: 100%;
        height: 1.3rem;
        border-top: 0;
        border-bottom: 0;
}
.input input{
          width: 100%;
          height: 100%;
          border-radius: 0.2rem;
          color: gray;
          font-size: 0.8rem;
}
.btn{
        display: flex;
        align-items: center;
        margin-top: 0.4rem;
       
}
.button{ 
          
          margin: 0 auto;
          height:1.5rem;
}

</style>